
<template>
	<div>
		<div style="height:28px;padding:5px">
			<el-row>
				<el-col :span="1">
					<el-button
						size="mini"
						@click="popSchBox"
						icon="el-icon-search"
					>搜索</el-button>
				</el-col>
				<el-col :span="1">
					<JsonExcel
						:data="rowDataFormat"
						name="订单跟踪.xls"
					>
						<el-button
							size="mini"
							icon="el-icon-download"
						>导出</el-button>
					</JsonExcel>
				</el-col>
			</el-row>
		</div>
		<div>
			<hr
				style="border:1 dashed "
				width="100%"
				color="#DCDFE6"
				size="1"
			/>
		</div>
		<div>
			<ag-grid-vue
				ref="grid"
				:columnDefs="columnDefs"
				:rowData="rowData"
				:style="{ height: gridHeight }"
				:pagination="false"
				@grid-ready="onGridReady"
				:enablecolresize="true"
				class="ag-theme-material"
			></ag-grid-vue>
			<el-pagination
				:total="rowsCount"
				:current-page="currentPage"
				:page-sizes="[50,100,200,500]"
				:page-size="pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				@size-change="handleSizeChange"
				@current-change="currentPageSelect"
			></el-pagination>
		</div>
		<SaleOutSearchBox
			@searchBtnClick="listSalesReportByDefault"
			ref="schBox"
		/>
	</div>
</template>

<script>
	import { AgGridVue } from 'ag-grid-vue'
	import { listSalesReport } from '@/api/salesreport'
	import SaleOutSearchBox from '@/components/SearchBox/SaleOutSearchBox.vue'
	import JsonExcel from 'vue-json-excel'

	export default {
		components: {
			AgGridVue,
			SaleOutSearchBox,
			JsonExcel
		},
		data() {
			return {
				columnDefs: [
					{
						headerName: '单号', field: 'FBILLNO', sortable: true, filter: true,
						resizable: true
					},
					{
						headerName: '序号', field: 'FSEQ', sortable: true, filter: true,
						resizable: true
					},
					{
						headerName: '产品编码',
						field: 'MTLCODE',
						sortable: true,
						filter: true,
						resizable: true
					},
					{
						headerName: '产品名称',
						field: 'MTLNAME',
						sortable: true,
						filter: true,
						resizable: true
					},
					{
						headerName: '旧编码',
						field: 'OLDNUMBER',
						sortable: true,
						filter: true,
						resizable: true
					},
					{ headerName: '订单数量', field: 'FQTY', sortable: true, filter: true },
					{
						headerName: '单价',
						field: 'FTAXNETPRICE',
						sortable: true,
						filter: true,
						resizable: true
					},
					{
						headerName: '金额',
						field: 'FALLAMOUNT',
						sortable: true,
						filter: true,
						resizable: true
					},
					{
						headerName: '折扣',
						field: 'FDISCOUNTRATE',
						sortable: true,
						filter: true,
						resizable: true
					},
					{
						headerName: '折前单价',
						field: 'FTAXPRICE',
						sortable: true,
						filter: true,
						resizable: true
					},
					{
						headerName: '确认日期',
						field: 'FAPPROVEDATE',
						sortable: true,
						filter: true,
						resizable: true
					},

					{
						headerName: '已发数量',
						field: 'FSTOCKOUTQTY',
						sortable: true,
						filter: true,
						resizable: true
					},
					{
						headerName: '已退数量',
						field: 'FRETURNQTY',
						sortable: true,
						filter: true,
						resizable: true
					},
					{
						headerName: '未发数量',
						field: 'FREMAINOUTQTY',
						sortable: true,
						filter: true,
						resizable: true
					},
					{ headerName: '单位', field: 'UNITNAME', sortable: true, filter: true },
					{
						headerName: '应收款',
						field: 'FARAMOUNT',
						sortable: true,
						filter: true,
						resizable: true
					}
				],
				rowData: null,
				gridHeight: '',
				rowsCount: null,
				currentPage: 1,
				pageSize: 200,
				gridApi: null,
				columnApi: null,
				customerModel: null
			}
		},
		methods: {
			onGridReady(params) {
				this.gridApi = params.api
				this.columnApi = params.columnApi
			},
			csvExport() {
				const params = {
					skipHeader: false,
					columnGroups: true,
					skipFooters: false,
					skipGroups: false,
					skipPinnedTop: false,
					skipPinnedBottom: false,
					allColumns: true,
					onlySelected: false,
					suppressQuotes: true,
					fileName: '订单导出',
					columnSeparator: ','
				}
				this.gridApi.exportDataAsCsv(params)
			},
			popSchBox() {
				this.$refs.schBox.dialogVisible = true
			},
			currentPageSelect(pageIdx) {
				if (pageIdx !== this.currentPage) {
					this.currentPage = pageIdx
				}
				const start = (pageIdx - 1) * this.pageSize
				const end = start + this.pageSize
				this.listSalesReport(start, end, this.getConditions())
			},
			handleSizeChange(val) {
				this.pageSize = val
				this.currentPageSelect(1)
			},
			getConditions() {
				const conditions = [
					{
						Key: 'FBILLNO',
						Op: 'like',
						Value: '%' + this.$refs.schBox.form.kwOrderCode + '%'
					}
				]
				if (this.$refs.schBox.form.kwDocDate1) {
					conditions.push({
						Key: 'FAPPROVEDATE',
						Op: '>=',
						Value: this.$refs.schBox.form.kwDocDate1
					})
				}
				if (this.$refs.schBox.form.kwDocDate2) {
					conditions.push({
						Key: 'FAPPROVEDATE',
						Op: '<=',
						Value: this.$refs.schBox.form.kwDocDate2
					})
				}
				conditions.push({
					Key: 'MTLNAME',
					Op: 'LIKE',
					Value: '%' + this.$refs.schBox.form.kwProduction + '%'
				})
				conditions.push({
					Key: 'OLDNUMBER',
					Op: 'LIKE',
					Value: '%' + this.$refs.schBox.form.kwOldNumber + '%'
				})
				return conditions
			},
			listSalesReport(pos, size, conditions) {
				listSalesReport(pos, size, conditions)
					.then(response => {
						this.rowData = response.Data
						this.rowsCount = response.Cnt
					})
					.catch(error => {
						console.log(error)
						this.rowData = []
						this.rowsCount = 0
					})
			},
			listSalesReportByDefault() {
				this.listSalesReport(
					this.currentPage - 1,
					this.pageSize,
					this.getConditions()
				)
			}
		},
		computed: {
			rowDataFormat: function () {
				let json = []
				if (this.rowData != null) {
					for (let i = 0; i < this.rowData.length; i++) {
						let item = {}
						item.单号 = this.rowData[i].FBILLNO
						item.序号 = this.rowData[i].FSEQ
						item.产品编码 = this.rowData[i].MTLCODE
						item.产品名称 = this.rowData[i].MTLNAME
						item.单价 = this.rowData[i].FTAXNETPRICE
						item.金额 = this.rowData[i].FALLAMOUNT
						item.折扣 = this.rowData[i].FDISCOUNTRATE
						item.折前单价 = this.rowData[i].FTAXPRICE
						item.订单数量 = this.rowData[i].FQTY
						item.确认日期 = this.rowData[i].FAPPROVEDATE
						item.已发数量 = this.rowData[i].FSTOCKOUTQTY
						item.单位 = this.rowData[i].UNITNAME
						item.应收金额 = this.rowData[i].FARAMOUNT
						item.旧编码 = this.rowData[i].OLDNUMBER
						item.未发数量 = this.rowData[i].FREMAINOUTQTY

						json.push(item)
					}
				}
				return json
			}
		},
		mounted() {
			this.gridHeight = window.innerHeight - 30 - 50 - 32 - 5 - 38 - 10 + 'px'
			const that = this
			window.onresize = function changeGridSize() {
				that.gridHeight = window.innerHeight - 30 - 50 - 32 - 5 - 38 - 10 + 'px'
			}
			this.listSalesReportByDefault()
		},
		beforeMount() { }
	}
</script>

<style lang="scss">
	@import "../../../node_modules/ag-grid-community/dist/styles/ag-grid.css";
	@import "../../../node_modules/ag-grid-community/dist/styles/ag-theme-balham.css";
	@import "../../../node_modules/ag-grid-community/dist/styles/ag-theme-material.css";
</style>

